<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 一、AJax(简写)：浏览器向服务端发送http请求（数据请求）
        // 二、Ajax主要涉及到的技术：异步、JavaScript（处理数据）、JSON（传输数据）
        // 三、Ajax的优缺点
        // 优点：
        // 1.页面无刷新，在页面内与服务器通信，减少用户等待的时间，增强了用户体验。
        // 2.使用异步方式与服务器通信，响应速度快。
        // 3.可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和宽带的负担，节约空间和宽带租用成本。
        // 4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
        // 缺点：
        // 1.无法进行操作的后退，即不支持浏览器的页面后退。
        // 2.对搜索引擎的支持比较弱。
        // 3.可能会影响程序中的异常处理机制。
        // 4.安全问题，对一些网站攻击，如csrf, xxs, sql注入等不能很好的防御。

        // 四、Ajax的工作过程
        // 1.浏览器向服务端发送数据请求
        // 2.服务端收到ajax请求，连接数据库，在数据库中操作数据
        // 3.数据库把数据返回给服务端
        // 4.服务端把数据返回给浏览器

        // 五、浏览器如何发送Ajax？（原生Ajax）
        // 1.创建XMLHttpRequest对象
        // 2.发送HTTP请求
        // 3.接受服务器传回的数据
        // 4.更新网页数据

        // 六、跨域问题
        // 网址：协议+域名+端口号+目录
        // https://www.baidu.com:8080/

        // https://www.xiaohong.com:4567

        // 同源策略（CORS）：是浏览器为了保护网页资源安全，要求请求数据的时候，必须是协议、域名、端口号三者一致，才能发起数据请求
       
        // 解决跨域问题：后端服务器设置允许跨域

        // 七、请求方式：get和post的区别
        // 1.传参位置的区别：get的参数是写在接口地址后面，接口地址?参数名1=参数值1&参数名2=参数值2
        //                 post的参数是写在send方法里面,xhr.send("参数名1=参数值1&参数名2=参数值2")
        // 2.参数大小的区别：get参数是2k-4k之间，因为url地址长度优先
        //                  post参数大小根据配置文件大小设置，可以无限大
        // 3.安全性区别：get请求的参数是在url地址里面，安全性较低；
        //              post请求安全性较高
        // 4.数据缓存：get请求的数据会缓存在浏览器中，下一次做相同的数据请求时，会直接从浏览器的缓存中把数据获取到，不再经过服务器，但是不会获取到服务器中的最新数据
        //            post每次请求都会经过服务器获取最新数据


        // 八、简易服务端接口
        


    </script>
</body>

</html>